<template>
    <!-- 
        1.dialog的显示与否是通过 :visible.sync的值来控制的
        2.close-on-click-modal="false"控制点击遮罩是否隐藏弹出层；
    -->
    <el-dialog title="添加用户" width="560px" :visible.sync="addUserDialogVisible" :close-on-click-modal="false">
        <!-- rules表示绑定我们自定义的规则 -->
        <el-form :model="addUser" :rules="rules" ref="addForm">
            <!-- label-width="70px"是控制文字的宽度; prop是指定该表单项应用哪个校验规则 -->
            <el-form-item label="姓名" label-width="70px" prop="name">
                <el-input v-model="addUser.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话" label-width="70px" prop="mobile">
                <el-input v-model="addUser.mobile" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮件" label-width="70px" prop="email">
                <el-input v-model="addUser.email" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="部门" label-width="70px" prop="deptId">
                <el-cascader  
                    ref="cascaderArr" 
                    @change="handleChange($event)" 
                    style="width:100%" 
                    label-width="100px"  
                    v-model="addUser.deptId" 
                    :options="depts" :props="{ value: 'id', label: 'name', expandTrigger: 'hover' ,checkStrictly: true}"></el-cascader>
             </el-form-item>

            <el-form-item label="角色" label-width="70px" prop="roleIds">
                <el-select v-model="addUser.roleIds" multiple placeholder="请选择" @change="roleChange" style="width:100%" >
                 <el-option
                v-for="item in roles"               
                :label="item.remark"
                :key="item.id"
                :value="item.id">
                </el-option>
                </el-select>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="closeAndReset">取 消</el-button>
            <el-button type="primary" @click="sureAdd">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
import http from '@/utils/request.js'
import  VueCookies  from 'vue-cookies'

export default {
    data() {
        return {
            // addUserDialogVisible是用来控制弹出框是否显示, false表示不显示；true表示显示
            addUserDialogVisible: false,
            addUser: {
                name: '',
                mobile: '',
                email:'',
                deptId:null,
                roleIds:[],
                createBy: ''
            },
            depts: [],
            roles:[],
            // 定义校验规则
            rules: {
                name: [
                    // required表示该值必须要填；message 表示违反规则的提示信息；trigger表示何时出发
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                ],
                mobile:[
                    { required: true, message: '请输入电话号码', trigger: 'blur' },
                    { min: 6, max: 11, message: '长度在 6 到 11 个数字', trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '请输入邮件', trigger: 'blur' },
                    /**
                     * ^: 表示以X开头
                     * \w: a-zA-Z_0-9
                     * []: 表示中间的内容任选一个
                     * [-\w]{2,7}: 表示数字、字母、_、-出现的次数在2到7之间
                     * \.: 表示 “.” 的意思
                     * \d: 表示数字
                     * $: 表示必须以这些内容结尾
                     */
                    { pattern: /^\w[-\w]{2,7}@[0-9A-Za-z]{2,6}\.[\dA-Za-z]{2,6}$/, 
                        message: '邮件不符合规则', trigger: 'blur'}
                ],
                deptId:[
                    { required: true, message: '请选择部门', trigger: 'change' }
                ],
                roleId: [
                    { required: true, message: '请选择角色', trigger: 'blur' }
                ]
            }
        }
    },
    mounted() {
        http.get('dept').then(res => {
            this.depts = res
        })
        http.get('role').then(res => {
            this.roles = res
            this.addUser.roleIds.push(this.roles[0].id )
            this.addUser.createBy = VueCookies.get('username')
        })
    },
    methods: {
        // 确认添加
        async sureAdd() {
            try {
                // 会抛出异常
                await this.$refs.addForm.validate()
                // this.addUser.deptId = this.addUser.deptId.reverse()[0]
                // 代码如果能走下来，表示校验通过
                await http.post('user',this.addUser)
                // 添加成功的提示消息
                this.$message({ message: '添加成功', type: 'success', duration: 1000})
                // 隐藏模态框
                this.addUserDialogVisible = false
                // 重置表单
                this.$refs.addForm.resetFields()
                // 重新查询数据
                this.$emit('refresh')
            }catch(err) {
                console.log(err);
            }
        },
        // 关闭并重置
        closeAndReset() {
            // 隐藏模态框
            this.addUserDialogVisible = false
            // 重置表单
            this.$refs.addForm.resetFields()
        },
        handleChange(row) {
        const checkedNode =  this.$refs["cascaderArr"].getCheckedNodes();
        this.addUser.deptId = checkedNode[0].value
        },
        roleChange(){
            // selectIds.push(this.roles.find( item => item.id ==val).id)
            // console.log(selectIds);
            // console.log(this.addUser.roleIds);
        }
    }
}
</script>

<style>

</style>